這邊的功能是為了想呈現網頁中作品集這個項目
但是在作品集中又分了很多品項
像是平面、網頁、插畫等等..
於是在最外層先放上一格一格的分類圖
點進分類圖之後
會跳出一個蓋板框
蓋板框內存放著該分類的圖片與資訊
為了簡化程式碼
在這邊使用了JSON來存取文字資訊
然後定義好內的內容之後
使用map()來呈現每一個分類

一開始先寫好JSON內的資訊workData

[{
    "id":1,
    "title1":"Graphic Design",
    "title2":"插畫設計",
    "link":"illastration_design-head",
    "link2":"illastration_design",
    "alt":"graphic_design"
},
{
    "id":2,
    "title1":"Graphic Design",
    "title2":"BANNER設計",
    "link":"graphic_design-head",
    "link2":"graphic_design",
    "alt":"graphic_design"
},
{
    "id":3,
    "title1":"UI Design",
    "title2":"Jabra耳機APP UI設計(仿作)",
    "link":"jabra_ui_design-head",
    "link2":"jabra_ui_design",
    "alt":"ui_design"
}]

在這邊先解釋
id是為了能放在li裡面的key
title為標題
link為圖片的連結
alt是圖片的alt

接下來放上整段程式碼

const [openWork,setOpenWork]=useState(false);
const [toLink,setLink]=useState('');
const [tit1,setTit1]=useState('');
const [tit2,setTit2]=useState('');
const handleOpen=(link,title1,title2)=>{
	setOpenWork(true);
	setLink(link);
	setTit1(title1);
	setTit2(title2);
        }
const handleClose=()=>{
	setOpenWork(false);
	setLink('');
        }
const op={opacity:openWork?'1':'0',
  transform:openWork?'scale(1)':'scale(0)',
  overflow:openWork?'scroll':'hidden'
  }

<ul id="allPortfolioUl">
  {workData.map(wk=>(
  <li key={wk.id}>
    <div className='box'  onClick={()=>{handleOpen(wk.link2,wk.title1,wk.title2)}}>
      <a>
        <div className="title">
          <div className="titleCenter">
            <h4>{wk.title1}</h4>
            <p className="titleCenterP">{wk.title2}</p>
          </div>
        </div>
		  					
        <img src={`img/work/${wk.link}.jpg`} alt={wk.alt}/>
      </a>
    </div>

    <div className="portPage" style={op}>
      <div className="closeP" onClick={handleClose}>x</div>
      <div className="pageWrap">
        <div className="portTitle">
          <h4>{tit1}</h4>
          <p className="titleCenterP">{tit2}</p>
          <hr className="shortColorBar"/>
        </div>
        <img src={`img/work/${toLink}.jpg`} alt={wk.alt}/>
      </div>
      <div className="closePB" onClick={handleClose}>x</div>
    </div>

  </li>
  ))}                       
</ul>

首先引入workData這個JSON檔
並使用map()把li排列出來
並定義li內的key
這邊若沒有定義key在console內會報錯
接著這邊我分為兩個主要區塊
一個是box與portpage
box為一開始排列在畫面上的分類
點到了這個box會跳出potpage這個視窗
這裡的

onClick={()=>{handleOpen(wk.link2,wk.title1,wk.title2)}}

為什麼會傳入這麼多參數
是因為若不傳入這些參數
在點擊任何一個box進入後
所獲得的資訊都會是最後一個id(全部一起)傳入的內容
所以我們必須指定
點擊到哪個連結會傳入相對應的參數

接著使用useState來定義點擊時的狀態
與傳入參數時的狀態改變

const [openWork,setOpenWork]=useState(false);
const [toLink,setLink]=useState('');
const [tit1,setTit1]=useState('');
const [tit2,setTit2]=useState('');

const op={opacity:openWork?'1':'0',
  transform:openWork?'scale(1)':'scale(0)',
  overflow:openWork?'scroll':'hidden'
}

一開始狀態setOpenWork設定為false
也就是portpage的opacity為0
並且將傳入參數title1、title2、link2
都設為空字串

點擊box之後
透過handleOpen改變參數

const handleOpen=(link,title1,title2)=>{
	setOpenWork(true);
	setLink(link);
	setTit1(title1);
	setTit2(title2);
        }
const handleClose=()=>{
	setOpenWork(false);
	setLink('');
        }

setOpenWork改變為true
另外三個狀態都改變為對應參數
傳入portpage
按下handleClose後
setOpenWork又變回false
並且將圖片連結設為空字串
這邊為什麼圖片連結要變回空字串呢?
因為這邊發現到了一個問題
就是若沒有再改回空字串
進入第一個box退出後
在點擊第二個box
會先出現第一個box的圖片
再顯示出第二個box的圖片
所以這邊得做一個清除第一個圖片的動作